<template>
  <div class="tabs-nav" ref="tabNav">
    <div class="tab-wrap" ref="tabWrap">
      <div :class="tab_ul_class" ref="tabsUl">
        <template v-for="(tab,index) in tabs">
          <div class="tab-text" :class="{active: tab_index===index}" :key="index" @click="selectTab(index)"><span
            class="tab-text-name">{{tab[navKey]}}</span></div>
        </template>
      </div>
      <div class="tab-line" :style="{width: line_width+'px', transform: 'translateX('+line_left+'px)'}"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'tabs-nav',
    props: {
      tabs: { // 标签数组
        type: Array,
        default: [],
        required: true
      },
      tab_index: { // 当前标签的索引
        type: Number,
        default: 0,
        required: true
      },
      navKey: { // 标签名对应的属性
        type: String,
        default: 'text'
      },
      swipeThreshold: { // 滚动阈值，标签数量超过多少个可滚动
        type: Number,
        default: 4
      }
    },
    model: {
      prop: 'tab_index',
      event: 'tab_index'
    },
    data() {
      return {
        tab_ul_class: 'tab-ul-1',
        tabs_ele: [], // 对应每个导航的节点
        line_width: 20, // 导航滑块 width
        line_left: 15, // 导航滑块 left

        timer: null
      }
    },
    watch: {
      tabs: function(val) { // 这里不用深度监听，只监听tags.lenght变化
        this.setTabUlClass()
        this.getTabsEle()
        this.$nextTick(() => {
          setTimeout(() => {
            this.setLineStyle(this.tab_index)
          })
        })
      },
      tab_index: function (val) {
        this.$nextTick(() => {
          this.setLineStyle(val)
        })
      }
    },
    created() {
      this.setTabUlClass()
    },
    mounted() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.getTabsEle()
          this.setLineStyle(this.tab_index)
        })
      })
    },
    methods: {
      // 切换tab
      selectTab(index) {
        this.$emit('tab_index', index)
      },
      // 获取nav子节点
      getTabsEle() {
        if (this.$refs.tabsUl) {
          this.tabs_ele = this.$refs.tabsUl.children // 获取所有tab节点
        }
      },
      // 设置tab-ul样式
      setTabUlClass() {
        this.tab_ul_class = this.tabs.length > this.swipeThreshold ? 'tab-ul-1' : 'tab-ul-2'
      },
      // 设置导航滑块样式
      setLineStyle(index) {
        let ele = this.tabs_ele[index]
        let tabWrap = this.$refs.tabWrap

        // console.log(1, this.tabs.length);
        if (!ele) return;
        // console.log(2, this.tabs.length);

        // 保持激活nav位于视窗内
        if (ele.offsetLeft < tabWrap.scrollLeft) {
          tabWrap.scrollLeft = ele.offsetLeft
          // this.moveScroll(tabWrap, ele.offsetLeft, false, 150, () => {})
        }
        if (ele.offsetLeft + ele.clientWidth > tabWrap.scrollLeft + tabWrap.clientWidth) {
          tabWrap.scrollLeft = ele.offsetLeft + ele.clientWidth - tabWrap.clientWidth
          // this.moveScroll(tabWrap, ele.offsetLeft + ele.clientWidth - tabWrap.clientWidth, false, 150, () => {})
        }

        this.line_width = ele.clientWidth - 30
        this.line_left = ele.offsetLeft + 15
      },
      // 切换导航 scrollTop 过渡
      // moveScroll(obj, cVal, axis, time, callback) {
      //   /*
      //   * obj : 节点
      //   * cVal: scroll 变化量
      //   * axis: 方向, true 为 Y 轴 false 为 X 轴
      //   * time: 过渡时间
      //   * callback: 完成时的回调函数
      //   * */
      //   callback = callback || function () {
      //   }
      //   let This = this
      //   cancelAnimationFrame(This.timer)
      //
      //   let sTop = obj.scrollTop // 初始scrollTop
      //   let sLeft = obj.scrollLeft
      //   let sTime = new Date() // 开始时间
      //   let prop = 0
      //
      //   let move = function () {
      //     prop = (new Date() - sTime) / time //已经过去的时间 和 总时间的 比值
      //     prop >= 1 ? prop = 1 : This.timer = requestAnimationFrame(move)
      //
      //     axis ? obj.scrollTop = sTop + (cVal - sTop) * prop : obj.scrollLeft = sLeft + (cVal - sLeft) * prop
      //
      //     if (prop === 1) callback.call(obj)
      //   }
      //   move()
      // }
    }
  }
</script>
<style lang="scss" scoped>
  .tabs-nav {
    width: 100%;
    height: 46px;
    background-color: #fff;
    border-top: 1px solid #eff0f3;
    overflow-x: hidden;
    overflow-y: hidden;
    .tab-wrap {
      position: relative;
      width: 100%;
      height: 60px;
      overflow-x: scroll;
      overflow-y: hidden;
      scroll-behavior: smooth;
      .tab-ul-1 {
        height: 46px;
        white-space: nowrap;
        div.tab-text {
          display: inline-block;
          height: 46px;
          padding: 0 12px;
          /*border-right: 1px solid #ededed;*/
          .tab-text-name {
            height: 42px;
            font-size: 13px;
            line-height: 46px;
            text-align: center;
            color: #666;
          }
        }
        div.active {
          .tab-text-name {
            color: #da1520;
          }
        }
      }
      .tab-ul-2 {
        width: 100%;
        height: 46px;
        display: flex;
        div.tab-text {
          flex: 1 1 auto;
          height: 46px;
          padding: 0 12px;
          text-align: center;
          .tab-text-name {
            height: 42px;
            font-size: 13px;
            line-height: 46px;
            text-align: center;
            color: #666;
          }
        }
        div.active {
          .tab-text-name {
            color: #da1520;
          }
        }
      }
      .tab-line {
        position: absolute;
        left: 0;
        bottom: 18px;
        width: 40px;
        height: 3px;
        background-color: #da1520;
        border-radius: 4PX;
        z-index: 1;
        transition-property: transform;
        transition-duration: .1s;
        transition-timing-function: ease-in;
      }
    }
  }
</style>
